body{font-size:12px;color:#333;margin:0;padding:0}
#header{background:#022559;width:100%;height:90px;color:#fff;
  background: -webkit-linear-gradient(left, #1e183e , #00265a 33%, #1e183e 66%, #00265a); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #1e183e , #00265a, #1e183e, #00265a); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #1e183e , #00265a, #1e183e, #00265a); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #1e183e , #00265a 33%, #1e183e 66%, #00265a); 
}

#headWraper{max-height:90px;height:90px;margin:0 auto;background:url(../images/cloud.png) no-repeat right bottom}
#headWraper>#logo{float:left;width:178px;}
#headWraper>#logo img{width:152px;height:45px;margin-top:22px}
#headWraper>#headSlogan{float:left;padding-top:26px;font-size:30px;line-height:1.0em;}
 
#tabWraper{background-color:#fafbfc;border-bottom:1px solid #dee2e6;padding-top:20px}
ul#myTab{background-color:#fafbfc;margin-bottom:-1px}
ul#myTab .nav-link.active{border-top:3px solid #d24b39;margin-top:0px}
ul#myTab .nav-link{border-top-left-radius:0;border-top-right-radius:0;margin-top:2px}
ul#myTab .nav-title span{padding:.5rem 1rem;display:block;}

.tab-content>.tab-pane{padding:26px 0 24px 0;}
.tab-pane button{color:#f5f5f5;padding-right:1.65rem;margin-bottom:12px}
.tab-pane button>i{color:#f5f5f5}
.tab-pane button.btn-light{color:#555;border-color:#d8d8d8;background-color:#f5f5f5}
.tab-pane button.btn-checked{color:#fff;background-color:#4a74df;border-color:#3c62b1}

#recogForm>#preview{border:1px solid #e2e2e2;background:#fafbfc}
#recogForm>#result{border:1px solid #e2e2e2;background:#fafbfc;max-height:624px;overflow:auto}
#recogForm>#preview{padding:40px 32px;border-right:none;}
#rsltTitle{color:#bd3f2e;border-left:4px solid #c34131;margin-left:-15px;margin-top:21px;font-size:1.2rem}
#rsltTitle i{padding:0 0.3rem 0 0.6rem}
#btnPick{margin-bottom:0px}
.table-borderless td,.table-borderless th{border:0!important}

@media screen and (max-width:576px) {
    #header{height:62px;}
    #headWraper{height:62px;background:url(../images/clouds.png) no-repeat right bottom}
    #headWraper>#logo{width:128px;height:30px;}
	#headWraper>#logo img{width:101px;height:30px;margin:16px 0 0 10px;}
	#headWraper>#headSlogan{font-size:20px;padding-top:18px;}
	.tab-content{
		padding:0px!important;
	}
	.tab-pane button{margin-bottom:0px}
	.tab-content>.tab-pane{display:block!important;padding:0;background:#e0e0e1;}
	.tab-content>.tab-pane>.row{margin:0}
	.tab-content>.tab-pane>.row>.col-6{background:#fff;}
	.tab-content>.tab-pane>.row>.col-6>span{display:block;height:100%;border-bottom:1px solid #e0e0e1;}
	.tab-content>.tab-pane button,.tab-content>.tab-pane button.btn-primray,.tab-content>.tab-pane button.btn-light{
		color:#444;
		text-align:center;
		width:100%;
		background:#fff;
		border-color:#e0e0e1;
		border-radius:0px;
		border-top:0px;
		border-left:0px;
		box-shadow:none!important;
	}
	
	.btn-primray:focus,.btn-primray:active{
    	outline: 0;
    	background-color:#fff!important;
    	border-color:#e0e0e1!important;
    	box-shadow:none!important;
	}

	
	.tab-content>.tab-pane>.row>.even>button{
		border-right:0px;
	}
	.tab-content>.tab-pane .col-6{padding:0;}
	#recogForm{flex-flow:column}
	
	#recogForm>#tBack{order:0} 
	#recogForm>#label1{order:1}
	#recogForm>#ctrlPicker{order:3;padding-bottom:42px}
	#recogForm>#notice{order:2;line-height:1.2rem;padding:8px 15px}
	#recogForm>#preview,#recogForm>#result{border-left:none;border-right:none;background:#f8f8f8}
	#recogForm>#preview{order:4;border-bottom:none;padding:1.6rem}
	#recogForm>#result{order:5;;}
	
	#recogForm>#label1
	,#recogForm>#ctrlPicker
	,#recogForm>#notice{background-color:#f8f8f8}
	#rsltTitle{margin-left:0px;margin-top:15px;}
	
	
}
@media screen and (max-width:320px) {
	#headWraper>#logo{width:120px}
	#headWraper>#headSlogan{font-size:18px;padding-top:18px;}
}
@media screen and (min-width:576px) {
	.tab-content{padding:0 15px}
}


#tBack{padding:0px 0px;
	border-bottom:4px solid #dadada;
	border-image: -webkit-linear-gradient(#dadada,#f5f5f5) 30 30;
    border-image: -moz-linear-gradient(#dadada,#f5f5f5) 30 30;
    border-image: linear-gradient(#ddd,#f8f8f8) 30 30;
    cursor:pointer;
}
#tBack>div{display:flex;width:100%;padding:4px 0;border-bottom:1px solid #dadada}
#tBack span{line-height:1.7rem;font-size:1.1rem;font-weight:normal}
i.icon-navigate_before.text-lg{font-size:2rem;}

h4.sp-rcgT{padding:0;margin:0;background-color:#f8f8f8;font-size:1.2rem;border-left:3px solid #c34131;padding-left:0.2rem;}
.cfgTitle{padding:0.6rem 0;background-color:#f8f8f8;border-bottom:1px solid #e0e0e1}

#notice ul{list-style:none;font-size:0.8rem;color:#8d8d8d}

#page-container{
	min-height: 600px;
}
#page{
	position: fixed;
	right: 5%;
	bottom: 10px;
}